<template>
    <section>
        <router-view></router-view>
        <div class="bottomnav">
            <ul>
                <li>
                    <router-link to="/homepage">
                        <img src="../../assets/images/shouyelogo00.png" alt="" class="active">
                        <img src="../../assets/images/shouyelogo.png" alt="" class="unactive">
                    </router-link>
                </li>
                <li>
                    <router-link to="/classification" class="second">
                        <img src="../../assets/images/fenleilogo.png" alt="" class="active">
                        <img src="../../assets/images/fenleilogo00.png" alt="" class="unactive">
                    </router-link>
                </li>
                <li>
                    <router-link to="/">
                        <img src="../../assets/images/jingxilogo.png" alt="">
                        <!-- <img src="../../assets/images/jingxilogo00.png" alt="" class="unactive"> -->
                    </router-link>
                </li>
                <li>
                    <router-link to="/">
                        <img src="../../assets/images/gouwuchelogo.png" alt="" class="active">
                        <img src="../../assets/images/gouwuchelogo00.png" alt="" class="unactive">
                    </router-link>
                </li>
                <li><router-link to="/login"><img src="../../assets/images/weidenglulogo.png" alt=""></router-link></li>
            </ul>
        </div> 
    </section>
</template>

<style>
    .bottomnav{
        position: fixed;
        bottom: 0;
        background-color: rgb(255, 255, 255);
        font-size: 16px;
        margin: 0;
        padding: 0;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 31;
        box-sizing: border-box;
        width: 100%;
        list-style: none;
        background-color: rgb(255, 255, 255);
        transition: all 0.3s ease 0s;
        height: 60px;
        -webkit-box-shadow: 0 0 10px 0 hsla(0,6%,58%,.6);
        }
       .bottomnav ul li{
        float: left;
        width: 20%;
        }
        .bottomnav ul li img{
            width: 100%;
        }
        .bottomnav .router-link-exact-active .active{
            display: none;
        }
        .bottomnav .router-link-exact-active .unactive{
            display: block;
        }
</style>